<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			img{
			    vertical-align: top;
			}
			#small-box{
				border:black 1px solid;
				width: 350px;
				height: 400px;
				position: relative;
				
			}
			#mask{
				width: 50px;
				height: 50px;
				background-color: rgba(255, 0, 255, .3);
				position: absolute;
				top: 0;
				left: 0;
					cursor: move;
					display: none;
			}
		#small-box{
			margin: 30px;
		}
			
			#list{
				width: 350px;
				height:80px;
				cursor: pointer;
			}
			#list img{
				margin: 15px;
			}
		
			#big-box{
				width: 600px;
				height: 600px;
				border: 1px solid #ccc;
				position: absolute;
				top: 0;
				left: 400px;
				overflow: hidden;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="box">
			
				<div id="small-box">
					<img src="img/pic001.jpg" >
					<span id="mask"></span>
				</div>
				<div id="list">
					<img src="img/pic0001.jpg" alt="">
					<img src="img/pic0002.jpg" alt="">
					<img src="img/pic0003.jpg" alt="">
				
			</div>
			
			<div id="big-box">
				<img src="img/pic01.jpg"  id="bigimg">
			</div>
		</div>
		<script>
			window.onload = function(){
			var smallbox = document.getElementById("small-box");
			var mask = document.getElementById("mask");
			var list = document.getElementById("list");
			var listimg = list.children;
			var bigbox = document.getElementById("big-box");
			var bigimg = document.getElementById("bigimg");
			 
			//监听鼠标进入小盒子
			smallbox.onmouseover = function(){
				mask.style.display = 'block';
				bigbox.style.display = 'block';
				
				smallbox.onmousemove = function(event){
					var event = event ||window.event;
	var x = event.clientX - smallbox.parentNode.offsetLeft-mask.offsetWidth;
	var y = event.clientY -smallbox.parentNode.offsetTop -mask.offsetHeight;
				
				
				
				// 2.4 边界检测
				if(x < 0){
				    x = 0;
				}else if(x >= smallbox.offsetWidth - mask.offsetWidth){
				    x = smallbox.offsetWidth - mask.offsetWidth;
				}
				
				if(y < 0){
				    y = 0;
				}else if(y >= smallbox.offsetHeight - mask.offsetHeight){
				    y = smallbox.offsetHeight - mask.offsetHeight;
				}
				//小方块动起来
				mask.style.left = x + 'px'
				mask.style.top = y + 'px';
				
				
				bigimg.style.left = -x/ (smallbox.offsetWidth / bigbox.offsetWidth) + 'px';
				bigimg.style.top = - y / (smallbox.offsetHeight / bigbox.offsetHeight) + 'px';
				console.log(bigimg.style.left );
				console.log(bigimg.style.top);
				/*//让大图动起来
				bigimg.style.left = -x/((smallbox.offsetWidth)/bigbox.offsetWidth) +'px';
				bigimg.style.top = -y/((smallbox.offsetHeight )/bigbox.offsetHeight) +'px';
				console.log(bigimg.style.left );
				console.log(bigimg.style.top);*/
				
				
				
				}
			}
				
			
			
			
			
			
			
			//鼠标离开
			smallbox.onmouseout = function(){
				mask.style.display = 'none';
				bigbox.style.display = 'none';
				
			}	
				
		for(var i=0; i<listimg.length; i++){
		    (function (i) {
		        var img = listimg[i];
		        img.onmouseover = function () {
		            smallbox.children[0].src = "img/pic00"+ (i + 1) +".jpg";
		            bigimg.src = "img/pic0"+ (i + 1) +".jpg"
		        }
		    })(i);
		}
			}
		</script>
	</body>
</html>
